<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{securitypage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
			$(function(){
				var x = /*[[${modifyResult}]]*/'';
				if(x === true){
					alert(/*[[#{securitypage.js.modifysuccess}]]*/''
						);
				}else if(x === false){
					alert(/*[[#{securitypage.js.modifyfailed}]]*/''
						);
				}
			});
        function confirmPassword(){
        	if($('#newPassword').val() == '' || $('#confirmPassword').val() == '' || $('#oldPassword').val() == ''){
        		alert(/*[[#{securitypage.js.password.blank}]]*/''
        			);
        		return false;
        	}
        	if($('#newPassword').val() != $('#confirmPassword').val()){
        		alert(/*[[#{securitypage.js.password.valid}]]*/''
        			);
        		return false
        	}
        	return confirm(/*[[#{securitypage.js.confirmsubmit}]]*/''
        		);
        }
        function confirmQA(){
        	if($('#question').val()==''||$('#answer').val()==''||$('#QAPassword').val()==''){
        		alert(/*[[#{securitypage.js.qap.blank}]]*/''
        			);
        		return false;
        	}
        	return confirm(/*[[#{securitypage.js.confirmsubmit}]]*/''
        		);
        }
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="container">
        	<div class="row">
        		<h1 th:text="#{securitypage.content.title}"></h1>
        	</div>
        	<hr/>
        	<div class="row">
        		<div class="twocol">
        		</div>
        		<div class="eightcol">
        			<h3 th:text="#{securitypage.content.password.title}"></h3>
        			<form th:action="@{/i/updatePassword}" method="post">
	        			<ul id="password-ul">
	        				<li>
	        					<label th:text="#{securitypage.content.newpassword}"></label>
	        					<input id="newPassword" name="newPpassword" type="password"/>
	        				</li>
	        				<li>
	        					<label th:text="#{securitypage.content.confirmnewpassword}"></label>
	        					<input id="confirmPassword" name="confirmPassword" type="password"/>
	        				</li>
	        				<li>
	        					<label th:text="#{securitypage.content.oldpassword}"></label>
	        					<input id="oldPassword" name="oldPassword" type="password"/>
	        				</li>
	        				<li>
	        					<hr/>
	        				</li>
	        				<li style="text-align: center;">
	        					<button id="btn-confirmPassword" class="form-btn" type="submit" onclick="return confirmPassword();"><i class="icon-checkmark"></i><span th:text="#{securitypage.content.submit}"></span></button>
	        				</li>
	        			</ul>
        			</form>
        			<hr/>
        			<h3 th:text="#{securitypage.content.qa.title}"></h3>
        			<form th:action="@{/i/updateQA}" method="post">
        				<ul id="security-qa">
        					<li>
	        					<label th:text="#{securitypage.content.question}"></label>
	        					<input id="question" name="question"/>
	        				</li>
        					<li>
	        					<label th:text="#{securitypage.content.answer}"></label>
	        					<input id="answer" name="answer"/>
	        				</li>
	        				<li>
	        					<label th:text="#{securitypage.content.password}"></label>
	        					<input id="QAPassword" name="QAPassword" type="password"/>
	        				</li>
	        				<li>
	        					<hr/>
	        				</li>
	        				<li style="text-align: center;">
	        					<button id="btn-confirmQA" class="form-btn" type="submit" onclick="return confirmQA();"><i class="icon-checkmark"></i><span th:text="#{securitypage.content.submit}"></span></button>
	        				</li>
        				</ul>
        			</form>
        		</div>
        		<div class="twocol last">
        		</div>
        	</div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
